<template>
	<view class="content">
		<view class="addres clear-both bbt" @tap="showAddress=!showAddress;">
			<navigator url="/pages/address/address-list/address-list?backurl=1">
				<view class="float-l addres-l">
					<view class="fs14 colorm addres-choose" v-if="delivery.address==''">请选择地址</view>
					<view class="fs16 color3 font-weight text-over">{{delivery.address}}</view>
					<view class="fs14 color3 addres-name">{{delivery.name+' '+delivery.phone}}</view>
				</view>
				<image src="../../static/tabbar/index/enter.png" mode="aspectFill" class="addres-img float-r"></image>
			</navigator>
		</view>
		<view class="bbt">
			<!-- <view class="item clear-both">
				<view class="float-l fs14 color3 font-weight">配送方式</view>
				<view class="float-r clear-both">
					<view :class="['float-l ps_fs fs14',{'act':index==psfs},{'ml3':index==psfsList.length-1}]" v-for="(item,index) in psfsList" @click="choosePsfs(index)" :key="index">{{item}}</view>
				</view>
			</view> -->
			<view class="item clear-both" @click="showTime">
				<view class="float-l fs14 color3 font-weight">配送时间</view>
				<image src="../../static/tabbar/index/enter.png" mode="aspectFill" class="float-r item-img"></image>
				<text class="colorFF6 fs14 float-r" v-show="!delivery.deliveryDate || !delivery.checktime">未选择</text>
				<text class="colorFF6 fs14 float-r" v-show="delivery.deliveryDate&&delivery.checktime">{{delivery.deliveryDate+' '+delivery.checktime}}</text>
			</view>
			<view class="item clear-both" @click="showBZ">
				<view class="float-l fs14 color3 font-weight">配送备注</view>
				<image src="../../static/tabbar/index/enter.png" mode="aspectFill" class="float-r item-img"></image>
				<text class="colorFF6 fs14 float-r">{{orderRemark||'未填写'}}</text>
			</view>
			<view class="item clear-both bbnone2" v-show="delivery.shippingcost">
				<view class="float-l fs14 color3 font-weight">配送费用</view>
				<text class="colorm fs14 float-r font-weight">¥{{delivery.shippingcost.toFixed(2)}}</text>
			</view>
		</view>
		<!-- <view class="bbt cake-list">
			<view class="list-title fs18 color3 font-weight">今日闪送</view>
			<view class="list-item">
				<view class="clear-both">
					<image src="http://rescs.bestcake.com/act/mrhappy/special1.png" mode="aspectFill" class="item-img float-l"></image>
					<view class="float-l clear-both">
						<view class="float-l item-name">
							<view class="fs14 color3 mmb1">可莱思迪客 英国冰淇淋 125ml</view>
							<view class="fs12 colora2">规格：巧克力味</view>
							<view class="item-prise">
								<text class="fs16 color6 font-weight">¥28.00</text>
								<text class="fs14 color9">/杯</text>
							</view>
						</view>
						<view class="float-r fs14 color3">×1</view>
					</view>
				</view>
				<view class="clear-both zp">
					<image src="http://rescs.bestcake.com/act/mrhappy/special1.png" mode="aspectFill" class="zp-img float-l"></image>
					<view class="float-l clear-both">
						<view class="float-l item-name item-name2">
							<view class="fs14 color3 mmb1"><text class="colorm">【赠品】</text>可莱思迪客 英国冰淇淋 125ml</view>
							<view class="item-prise">
								<view class="fs12 colora2">规格：巧克力味</view>
							</view>
						</view>
						<view class="float-r fs14 color3">×1</view>
					</view>
				</view>
			</view>
			<view class="list-xj fs14 color9"><text class="mar1">小计</text><text class="colorm">￥</text><text class="colorm fs20">588.00</text></view>
		</view>
		<view class="bbt cake-list"> 
			<view class="list-title fs18 color3 font-weight">次日送达</view>
			<view class="list-item padb0">
				<view class="clear-both mb2">
					<image src="http://rescs.bestcake.com/act/mrhappy/special1.png" mode="aspectFill" class="item-img float-l"></image>
					<view class="float-l clear-both">
						<view class="float-l item-name">
							<view class="fs14 color3 mmb1">可莱思迪客 英国冰淇淋 125ml</view>
							<view class="fs12 colora2">规格：巧克力味</view>
							<view class="item-prise clear-both">
								<view class="float-l">
									<text class="fs16 color6 font-weight vertical">¥28.00</text>
									<text class="fs14 color9 vertical">/杯</text>
								</view>
								<view class="float-r">
									<image src="http://iph.href.lu/10x10" mode="aspectFill" class="vertical prise-img"></image>
									<text class="vertical fs14 color3">切分</text>
									<image src="http://iph.href.lu/10x10" mode="aspectFill" class="vertical prise-img"></image>
									<text class="vertical fs14 color3">蜡烛</text>
								</view>
							</view>
						</view>
						<view class="float-r fs14 color3">×1</view>
					</view>
				</view>
				<view class="item clear-both bbnone">
					<view class="float-l fs14 color3 font-weight">配送时间</view>
					<image src="http://iph.href.lu/10x10" mode="aspectFill" class="float-r list-img"></image>
					<text class="colorFF6 fs14 float-r">亲选择</text>
				</view>
				<view class="item clear-both bbnone">
					<view class="float-l fs14 color3 font-weight">配送时间</view>
					<image src="http://iph.href.lu/10x10" mode="aspectFill" class="float-r list-img"></image>
					<text class="colorFF6 fs14 float-r">亲选择</text>
				</view>
			</view>
			<view class="list-xj fs14 color9"><text class="mar1">小计</text><text class="colorm">￥</text><text class="colorm fs20">258.00</text></view>
		</view>-->
		<!--产品列表-->
		<view class="bbt cake-list">
			<!-- <view class="list-title fs18 color3 font-weight">次日送达</view> -->
			<view class="list-item" v-for="(items , index) in CommodityList" :key="index">
				<view class="clear-both">
					<image :src="items.img" mode="aspectFill" class="item-img float-l"></image>
					<view class="float-l clear-both">
						<view class="float-l item-name">
							<view class="fs14 color3 mmb1">{{items.CommodityName}}</view>
							<view class="fs12 colora2">规格：{{items.PackageName}}</view>
							<view class="item-prise clear-both">
								<view class="float-l">
									<text class="fs16 color6 font-weight vertical">{{items.ZkPrice || items.Price}}</text>
									<text class="fs14 color9 vertical">/{{items.Size}}</text>
								</view>
								<!-- <view class="float-r" v-if="index==cakeList.length-1">
									<image src="http://iph.href.lu/10x10" mode="aspectFill" class="vertical prise-img"></image>
									<text class="vertical fs14 color3">切分</text>
									<image src="http://iph.href.lu/10x10" mode="aspectFill" class="vertical prise-img"></image>
									<text class="vertical fs14 color3">蜡烛</text>
								</view> -->
							</view>
						</view>
						<view class="float-r fs14 color3">x{{items.Num}}</view>
					</view>
				</view>
				<!-- <view class="clear-both zp" v-if="items.zp">
					<image src="http://rescs.bestcake.com/act/mrhappy/special1.png" mode="aspectFill" class="zp-img float-l"></image>
					<view class="float-l clear-both">
						<view class="float-l item-name item-name2">
							<view class="fs14 color3 mmb1"><text class="colorm">【赠品】</text>{{items.zp.name}}</view>
							<view class="item-prise">
								<view class="fs12 colora2">规格：{{items.zp.guige}}</view>
							</view>
						</view>
						<view class="float-r fs14 color3">{{items.zp.num}}</view>
					</view>
				</view> -->
				<!-- <view v-if="index==cakeList.length-1">
					<view class="item clear-both bbnone item2" @click="showDgp">
						<view class="float-l fs14 color3 font-weight">蛋糕牌</view>
						<image src="http://iph.href.lu/10x10" mode="aspectFill" class="float-r list-img list-img2"></image>
						<text class="colorFF6 fs14 float-r">亲选择</text>
					</view>
					<view class="item clear-both bbnone item2" @click="showTime">
						<view class="float-l fs14 color3 font-weight">配送时间</view>
						<image src="http://iph.href.lu/10x10" mode="aspectFill" class="float-r list-img list-img2"></image>
						<text class="colorFF6 fs14 float-r">亲选择</text>
					</view>
				</view> -->
			</view>
			<view class="list-xj fs14 color9"><text class="dicount" v-show="totalCommodityDicount>0">已优惠：￥{{totalCommodityDicount.toFixed(2)}}
				</text>
				<text class="mar1">小计：</text><text class="colorm">￥</text><text class="colorm fs20">{{totalCommodityPrice.toFixed(2)}}</text></view>
		</view>
		<!--统计 提交-->
		<view class="heji clear-both">
			<view class="float-l fs14 heji-l">
				<text class="color9 mar1">合计</text>
				<text class="colorm">￥</text>
				<text class="colorm fs20">{{pay.toFixed(2)}} </text>
				<text class="color9 fs14"> 优惠￥{{totaldiscount.toFixed(2)}}</text>
			</view>
			<view class="heiji_btn colorf fs16 font-weight float-r" @tap="submit">提交订单</view>
		</view>
		<!--弹窗-->
		<view class="main" @touchmove.stop.prevent v-show="showRemark || time">
			<!--填写备注-->
			<view class="white-box" v-show="showRemark">
				<view class="title clear-both">
					<view class="float-l fs18 color3 font-weight">填写备注</view>
					<view class="float-r fs16 colorFF6" @click="closeBz">完成</view>
				</view>
				<textarea placeholder="备注信息" class="textarea fs16 color3" cursor-spacing="50" show-confirm-bar="false" fixed="true"
				 maxlength="110" v-model="orderRemark" />
				<view class="bottom">
					<!-- <view>
						<image src="http://iph.href.lu/10x10" mode="aspectFill" class="vertical bottom-img"></image>
						<text class="fs16 color3 vertical">无</text>
					</view> -->
				</view>
			</view>
			<!--添加蛋糕牌-->
			<!-- <view class="white-box" v-show="tjDgp">
				<view class="title clear-both">
					<view class="float-l fs18 color3 font-weight">填写备注</view>
					<view class="float-r fs16 colorFF6"  @click="closeDgp">完成</view>
				</view>
				<input type="text" placeholder="最多输入8个汉字或16个字符" class="textarea2 fs16 color3" cursor-spacing="20" />
				<view class="bottom-list clear-both">
					<view class="float-l">
						<image src="http://iph.href.lu/10x10" mode="aspectFill" class="bottom-img"></image>
						<text class="fs16 color3 font-weight">无</text>
					</view>
				</view>
				<view class="bottom-list clear-both">
					<view class="float-l">
						<image src="http://iph.href.lu/10x10" mode="aspectFill" class="bottom-img"></image>
						<text class="fs16 color3 font-weight">生日快乐</text>
					</view>
					<view class="float-r">
						<text class="fs16 color3 font-weight">免费</text>
					</view>
				</view>
				<view class="bottom-list clear-both">
					<view class="float-l">
						<image src="http://iph.href.lu/10x10" mode="aspectFill" class=" bottom-img"></image>
						<text class="fs16 color3 font-weight">自定义</text>
					</view>
					<view class="float-r">
						<text class="fs16 color3 font-weight">¥5.00</text>
					</view>
				</view>
			</view> -->
			<!--选择配送时间-->
			<view class="white-box" v-show="time">
				<view class="title clear-both">
					<view class="float-l fs18 color3 font-weight">选择配送时间</view>
					<view class="float-r fs16 colorFF6"  @click="closeTime">完成</view>
				</view>
				<!-- <view class="header clear-both">
					<view class="float-l mr">
						<image src="http://iph.href.lu/10x10" mode="aspectFill" class="header-img"></image>
						<text class="fs16 color3">标准配送</text>
					</view>
					<view class="float-l">
						<image src="http://iph.href.lu/10x10" mode="aspectFill" class="header-img"></image>
						<text class="fs16 color3">今日闪送</text>
					</view>
				</view> -->
				<view class="scroll">
					<scroll-view scroll-y="true" class="scroll-left scrollbarNone">
						<view class="scroll-left-item" v-for="(item,index) in delivery.deliveryDateList" :key="index">
							<button :class="['btn fs16 color3',{'act':delivery.deliveryDate==item.deliveryDate}, {'btn1':index==0}]"  @click="chooseTime(item)">{{item.deliveryDate}}</button>
						</view>
					</scroll-view>
					<scroll-view scroll-y="true" class="scroll-right scrollbarNone" :scroll-top="scrollTop">
						<view class="scroll-right-item clear-both">
							<button class="btn btn1" v-for="(item,index) in delivery.timeList" :key="index" @click="chooseClock(item)">
								<view :class="['time fs16 color3 float-l',{'dis':item.tag},{'act':delivery.checktime==item.time}]">{{item.time}}</view>
								<!-- <view :class="['tag fs14 colorFF6 float-l',{'dis':item.dis}]">{{item.tag}}</view> -->
							</button>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<!-- <componentaddress 
		ref="componentaddress"
		v-show="showAddress" 
		:contentHeight="580" 
		:addressList="delivery.addresslist" 
		:confirmorder="true" 
		:address="localaddress"
		v-on:choosethisaddr="checkaddress"
		v-on:getallAddress="getAlladdress"
		></componentaddress> -->
	</view>
</template>
<script src="../../api/order/order-confirm.js">

</script>
	page{
		height: 100%;
	}
</style>
<style lang="scss">
	.content {
		padding-bottom: 13.334vw;

		.addres {
			height: 21.8667vw;

			.addres-l {
				margin-left: 4.2667vw;
				width: 81vw;
				height: 12vw;
				margin-top: 4.93335vw;

				.addres-name {
					margin-top: 2vw;
				}
				.addres-choose{
					height: 12vw;
					line-height: 12vw;
				}
			}

			.addres-img {
				width: 5.8667vw;
				height: 5.8667vw;
				display: block;
				margin-right: 4.2667vw;
				margin-top: 8.8vw;
			}
		}

		.item {
			height: 13.8667vw;
			line-height: 13.8667vw;
			margin: 0 4.2667vw;
			border-bottom: 2upx solid #f2f2f2;

			.ps_fs {
				width: 18.667vw;
				height: 7.4667vw;
				line-height: 7.4667vw;
				text-align: center;
				color: #BCBCBC;
				border: 2upx solid #E8E8E8;
				border-radius: 1vw;
				margin-top: 3.2vw;
			}

			.ml3 {
				margin-left: 3vw;
			}

			.act {
				color: #00449F;
				border: 2upx solid #00449F;
			}

			.item-img {
				width: 5.8667vw;
				height: 5.8667vw;
				margin-left: 2vw;
				margin-top: 4vw;
				display: block;
			}
		}

		.cake-list {
			.list-img {
				width: 5.8667vw;
				height: 5.8667vw;
				margin-left: 2vw;
				margin-top: 4vw;
				display: block;
			}

			.list-title {
				height: 13.8667vw;
				line-height: 13.8667vw;
				margin: 0 4.2667vw;
				border-bottom: 2upx solid #f2f2f2;
			}

			.list-item {
				padding: 5.334vw 0;
				margin: 0 4.2667vw;
				border-bottom: 2upx solid #f2f2f2;

				.zp {
					margin-top: 5.334vw;
				}

				.zp-img {
					width: 20vw;
					height: 20vw;
					border-radius: 1.6vw;
					border: 2upx solid #EEEEEE;
					margin-left: 6vw;
					margin-right: 2vw;
				}

				.item-img {
					display: block;
					width: 26.667vw;
					height: 26.667vw;
					border-radius: 1.6vw;
					border: 2upx solid #EEEEEE;
					margin-right: 2vw;
				}

				.item-name {
					width: 55vw;
					margin-right: 2vw;
					height: 26.667vw;
					position: relative;

					.item-prise {
						position: absolute;
						width: 62.5vw;
						left: 0;
						bottom: 0;

						.prise-img {
							margin-left: 3vw;
							margin-right: 1vw;
							width: 5.8667vw;
							height: 5.8667vw;
						}
					}

					.mmb1 {
						margin-bottom: 1vw;
					}
				}

				.item-name2 {
					height: 20vw;
				}
			}

			.list-xj {
				text-align: right;
				margin: 0 4.2667vw;
				height: 13.8667vw;
				line-height: 13.8667vw;
			}
		}

		.bbnone {
			border-bottom: none;
			margin: 0;
		}
		.bbnone2{
			border-bottom: none;
		}	
		.heji {
			width: 100%;
			height: 13.334vw;
			line-height: 13.334vw;
			position: fixed;
			left: 0;
			bottom: 0;
			background: #fff;
			border-top: 2upx solid #F2F2F2;

			.heji-l {
				margin-left: 4.2667vw;
			}

			.heiji_btn {
				width: 34.667vw;
				text-align: center;
				height: 100%;
				background: #00449F;
			}
		}

		.padb0 {
			padding-bottom: 0 !important;
		}

		.mb2 {
			margin-bottom: 2vw;
		}

		.mar1 {
			margin-right: 1vw;
		}
		.item2{
			height: 5.8667vw;
			line-height: 5.8667vw;
			margin: 0;
			border-bottom: none; 
			margin-top: 6.4vw;
		}
		.list-img2{
			margin-top: 0 !important;
		}
		.main{
			width: 100%;
			height: 100%;
			position: fixed;
			z-index: 99999;
			top:0;
			left: 0;
			background: rgba(0,0,0,0.5);
			.white-box{
				position: absolute;
				left: 0;
				background: #fff;
				width: 100%;
				bottom: 0;
				animation: height .4s;
				.title{
					height: 13.8667vw;
					line-height: 13.8667vw;
					border-bottom: 2.667vw solid #fafafa;
					padding: 0 4.2667vw;
				}
				.textarea{
					margin: 0 auto;
					padding: 2vw 3.2vw;
					display: block;
					height: 23vw;
					width: 87.466vw;
					background: #fafafa;
					border: 2upx solid #eee;
					border-radius: 1.6vw;
					margin-top: 4vw;
				}
				.textarea2{
					margin: 4vw auto 5.334vw auto;
					background: #fafafa;
					border: 2upx solid #eee;
					border-radius: 1.6vw;
					padding: 3vw 3.2vw;
					width: 87.466vw;
					height: 6vw;
					line-height: 6vw;
				}
				.bottom-img{
					width: 5.8667vw;
					height: 5.8667vw;
					margin-right: 1.6vw;
					vertical-align: middle;
				}
				.bottom{
					height: 19.7334vw;
					line-height: 19.7334vw;
					margin-left: 4.2667vw;
				}
				.bottom-list{
					height: 13.8667vw;
					line-height: 13.8667vw;
					border-top: 2upx solid #f2f2f2;
					margin: 0 4.2667vw;
				}
				.header{
					height: 13.8667vw;
					line-height: 13.8667vw;
					margin: 0 4.2667vw;
					.mr{
						margin-right: 8.5334vw;
					}
					.header-img{
						width: 5.8667vw;
						height: 5.8667vw;
						vertical-align: middle;
					}
				}
				.scroll{
					width: 100%;
					height: 112.8vw;
					white-space: nowrap;
					display: flex;
					.scroll-left{
						width: 34vw;
						height: 100%;
						display: inline-block;
						.scroll-left-item{
							width: 100%;
							height: 14.1vw;
							text-align: center;
							line-height:14.1vw; 
							.btn{
								width: 100%;
								height: 100%;
								padding: 0;
								margin: 0;
								border-radius: 0;
								line-height:14.1vw; 
								background: #f3f3f3;
							}
							.btn:after{
								border: none;
								outline: none;
							}
							.btn1{
								border-top: .1vw solid #f2f2f2;
							}
						}
						.act{
							background: #fff !important;
							color: #00449F;
						}
						.dis{
							color: #BCBCBC;
						}
					}
					.scroll-right{
						width: 66vw;
						height: 100%;
						display: inline-block;
						.scroll-right-item{
							width: 100%;
							height: 14.1vw;
							text-align: center;
							line-height:14vw;
							.btn{
								width: 100%;
								height: 100%;
								padding: 0;
								margin: 0;
								border-radius: 0;
								line-height:14.1vw; 
								background: #fff;
							}
							.btn:after{
								border: none;
								outline: none;
							}
							.btn1{
								border-top: .1vw solid #f2f2f2;
							}
							.time{
								margin: 0 4.2667vw 0 8.5334vw;
							}
							.tag{
								padding:0 2.667vw;
								border: 2upx solid #E5ECF5;
								border-radius: 1vw;
								height: 6.4vw;
								line-height:6.4vw; 
								margin-top: 3.8vw;
							}
							.dis{
								color: #BCBCBC;
								border-color: #EEEEEE
							}
							.act{
								color: #00449F
							}
						}
					}
				}
			}
		}
	}
	@keyframes height{
		from{bottom: -100%;}
		to{bottom: 0;}
	}
	.dicount{
		margin-right: 3vw;
	}
</style>
